<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-浅学音标'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="1"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="title">
              <text>元音</text>
            </view>
            <view class="table">
              <view class="table_content">
                <view class="table_title" style="height: 168rpx">
                  <text>单元音</text>
                </view>
                <view class="table_box">
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>前元音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('51')">
                      <text>[i:]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('3')">
                      <text>[I]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('4')">
                      <text>[e]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('5')">
                      <text>[æ]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>中元音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('6')">
                      <text>[ɜː]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('7')">
                      <text>[ə]/</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('8')">
                      <text>[ʌ]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>后元音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('9')">
                      <text>[u:]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('10')">
                      <text>[ʊ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('11')">
                      <text>[ɔ:]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('12')">
                      <text>[ɒ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('13')">
                      <text>[ɑ:]</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 112rpx">
                  <text>双元音</text>
                </view>
                <view class="table_box">
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>开合双元音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('14')">
                      <text>[ei]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('15')">
                      <text>[ai]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('16')">
                      <text>[ɔi]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('17')">
                      <text>[aʊ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('18')">
                      <text>[əʊ]</text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>集中双元音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('19')">
                      <text>[iə]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('20')">
                      <text>[ʊə]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('21')">
                      <text>[eə]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="title">
              <text>辅音</text>
            </view>
            <view class="table">
              <view class="table_content">
                <view class="table_title" style="height: 112rpx">
                  <text>爆破音</text>
                </view>
                <view class="table_box">
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>清辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('22')">
                      <text>[p]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('23')">
                      <text>[t]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('24')">
                      <text>[k]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('25')">
                      <text>[b]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('26')">
                      <text>[d]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('27')">
                      <text>[g]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 112rpx">
                  <text>摩擦音</text>
                </view>
                <view class="table_box">
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>清辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('28')">
                      <text>[f]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('29')">
                      <text>[s]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('30')">
                      <text>[ʃ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('31')">
                      <text>[θ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('32')">
                      <text>[h]</text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('33')">
                      <text>[v]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('34')">
                      <text>[z]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('35')">
                      <text>[ʒ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('36')">
                      <text>[ð]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 112rpx">
                  <text>擦破音</text>
                </view>
                <view class="table_box">
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>清辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('37')">
                      <text>[tʃ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('38')">
                      <text>[tr]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('39')">
                      <text>[ts]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                  <view class="table_list">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('40')">
                      <text>[dʒ]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('41')">
                      <text>[dr]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('42')">
                      <text>[dz]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 64rpx">
                  <text>鼻音</text>
                </view>
                <view class="table_box">
                  <view class="table_list active">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('43')">
                      <text>[m]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('44')">
                      <text>[n]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('45')">
                      <text>[ŋ]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 64rpx">
                  <text>舌则音</text>
                </view>
                <view class="table_box">
                  <view class="table_list active">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('46')">
                      <text>[I]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('47')">
                      <text>[r]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="table_content">
                <view class="table_title" style="height: 64rpx">
                  <text>半元音</text>
                </view>
                <view class="table_box">
                  <view class="table_list active">
                    <view class="table_list_title">
                      <text>浊辅音</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('48')">
                      <text>[j]</text>
                    </view>
                    <view class="table_list_item" @click="viewDetails('49')">
                      <text>[w]</text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                    <view class="table_list_item">
                      <text></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    viewDetails(id) {
      uni.navigateTo({
        url: `/pages/spelling/soundmarkShallowDetail?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./soundmarkShallow";
</style>
